<template>

  <div class="center-box">
    <div class="seed-one—box">
      <input v-model="quotaPrice" class="inputs" id="acceptInput"/>
    </div>
    <div class="seed-two-box">
      <button v-for="i in 9" :key="i" @click="sums(i)">{{ i }}</button>
      <button @click="cancels()">取消</button>
      <button @click="sums(0)">0</button>
      <button @click="confirm()">确定</button>
    </div>
  </div>

</template>
<script>
export default {
  name: "QuotaAlert",

  props: {
    showQuotaAlert:Boolean,
    quotaPrice: String,

  },
  methods: {
    // 追加
    sums(i) {
      // eslint-disable-next-line vue/no-mutating-props
      this.quotaPrice = this.quotaPrice.concat(i);
    },
    // 确定
    confirm() {
      console.log(this.quotaPrice);
      this.$emit("price", this.quotaPrice);

    },

    //取消
    cancels() {
      // eslint-disable-next-line vue/no-mutating-props
      this.quotaPrice = "";
      this.$emit("close-quota-alert")
    }
  },
  data() {
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      quotaPrice: "",
      // eslint-disable-next-line vue/no-dupe-keys
      quotaAlert: true
    }
  }
}
</script>
<style scoped>


.titles {
  float: left;
}

.occlude {
  float: right;
  font-size: 20px;
  cursor: pointer;
}

.center-box {
  width: 100%;
  height: 397px;
  background: rgb(13, 41, 67);
}

.seed-one—box {
  width: 100%;
  height: 130px;

}

.inputs {
  width: 99%;
  height: 50px;
  margin-top: 30px;
  border: 1px transparent;
  background-color: rgb(10, 33, 54);
  font-size: 25px;
  color: white;
  text-align: right
}

.seed-one—box > span {
  color: white;
}

.seed-two-box {
  background-color: rgb(13, 41, 67);
}

.seed-two-box > button {
  display: inline-block;
  font-size: 25px;
  width: 30%;
  height: 59px;
  background-color: rgb(19, 55, 87);
  box-sizing: border-box;
  margin: 4px 6px;
  color: white;
  text-align: center;
  line-height: 240%;
  cursor: pointer;
  border-radius: 5px;
  border: 1px transparent;
}


</style>